<script>
import { STATUS, TUICallKit } from '@tencentcloud/call-uikit-vue2';

export default {
  components: {
    TUICallKit
  },
  data() {
    return {
      showCall: false
    }
  },
  methods: {
    handleBeforeCalling() {
      console.log('handleBeforeCalling')
      // this.showCall = true
    },
    handleAfterCalling() {
      console.log('handleAfterCalling')
      // this.showCall = false
    },
    handleStatusChange({ oldStatus, newStatus }) {
      console.log({ oldStatus, newStatus })
      if (newStatus === STATUS.IDLE) {
        this.showCall = false
      } else {
        this.showCall = true
      }
    }
  }
};
</script>

<template>
  <div id="app">
    <audio id="notice" controls="true" muted>
      <source src="/voices/notice.mp3" type="audio/mp3">
    </audio>
    <router-view />
    <div class="call-kit">
      <TUICallKit
        style="pointer-events: all;"
        :allowedMinimized="true"
        :beforeCalling="handleBeforeCalling"
        :afterCalling="handleAfterCalling"
        @status-changed="handleStatusChange"
      />
    </div>
    
  </div>
</template>

<style>
body, html, #app {
  height: 100%;
  position: relative;
}

#notice {
  display: none;
}

.call-kit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;

  .avatar {
    margin-top: 0;
  }

  .groupInvite-header-mobile {
    padding-top: 40px;
  }
}
</style>
